<template>
	<view>
		<view class="navigation-bar">
			<view @click="turnBack">
				<image src="/static/左箭头.png"></image>
			</view><text>汽车保养</text>
		</view>
		<view class="background"></view>
		<view class="map1">
			<map style="width: 100%; height: 450px;" :latitude="latitude" :longitude="longitude" :markers="covers">
			</map>
		</view>
		<view class="card">
			<view class="head"><text>车百事汽车生活馆</text><text>556m</text></view>
			<view class="body1">
				<view class="body">
					<view class="details">
						<view class="score" v-if="score > 0">
							<uni-rate size="15" :value="score" />
							<text>{{ score }}分</text>
						</view>
						<view class="score" v-else>
							<view>暂无评分</view>
						</view>
						<view>营业时间：周一至周五<text>早上8:00到晚上22:00</text></view>
						<view>山阳区人民路与解放路交叉口</view>
					</view>
					<view>
						<image class="storeimg" src=""></image>
					</view>
				</view>
			</view>
			<view class="body">
				<view class="contact">
					<button @click="open">
						<image src="/static/电话.png"></image>联系门店
					</button>
				</view>
				<view class="reserve">
					<button @click="nextPage">
						<image src="/static/时钟.png"></image>立即预定
					</button>
				</view>
			</view>
			<uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="10px 10px 0 0">
				<view class="pop">
					<view class="number">
						18642589456
					</view>
					<view class="copy">
						复制
					</view>
					<view class="dial">
						取消拨号
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png'
				}],
				score: 5 // 初始化评分为 0
			}
		},
		methods: {
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			turnBack() {
				uni.navigateBack({
					url: "/pages/index/index"
				})
			},
			nextPage() {
				uni.navigateTo({
					url: "/packageMaintenance/pages/storeDetails/storeDetails"
				})
			}
		}
	}
</script>

<style>
	.navigation-bar {
		height: 150rpx;
		display: flex;
		align-items: center;
		background-color: #287BF6;
		position: relative;
	}

	.navigation-bar>view>image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 30rpx;
	}

	.navigation-bar>text {
		color: #FFF;
		margin-right: 40rpx;
		flex-grow: 1;
		text-align: center;
	}

	.background {
		position: absolute;
		background-color: #287BF6;
		width: 100%;
		height: 300rpx;
	}

	.map1 {
		position: relative;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #FFF;
		z-index: 1;
	}

	.card {
		background-color: #FFF;
	}

	.head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 30rpx;
	}

	.head>text {
		margin-top: 25rpx;
	}

	.head>text:nth-child(1) {
		font-weight: bold;
		font-size: 30rpx;
	}

	.head>text:nth-child(2) {
		color: #549AFD;
	}

	.score {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 10rpx;
	}
	.score>view{
		margin-left: 10rpx;
	}

	.volume {
		margin-left: 20rpx;
	}

	.body1 {
		margin: 0 25rpx;
	}

	.body {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.details {
		font-size: 25rpx;
	}

	.details>view>text {
		margin-left: 20rpx;
	}

	.storeimg {
		width: 200rpx;
		height: 150rpx;
		background-color: aqua;
		margin-left: 25rpx;
		border-radius: 10px;
	}

	.contact>button {
		background-color: #297BF6;
		margin: 30rpx 35rpx;
		height: 70rpx;
		width: 280rpx;
		border-radius: 20px;
		font-size: 32rpx;
		color: #FFF;
		display: flex;
		/* 使用 flex 布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.reserve>button {
		background-color: #FF5D24;
		margin: 30rpx 35rpx;
		height: 70rpx;
		width: 280rpx;
		border-radius: 20px;
		font-size: 32rpx;
		color: #FFF;
		display: flex;
		/* 使用 flex 布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.body>view>button>image {
		width: 50rpx;
		height: 50rpx;
	}

	.pop {
		text-align: center;
	}

	.number {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #E8E8E8;
	}

	.copy {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 3px solid #E8E8E8;
	}

	.dial {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
	}
</style>